<template>
  <div id="app">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul class="topia">
        <router-link :to="`/topic/${item.id}`" tag="li" v-for="item in list" :key="item.id">
          <img :src="item.scene_pic_url" alt="" />
          <p class="topic-p1">{{ item.title }}</p>
          <p class="topic-p2">{{ item.subtitle }}</p>
          <p class="topic-p3">{{ item.price_info }}元起</p>
        </router-link>
      </ul>
    </van-list>
  </div>
</template>

<script type="text/javascript">
import { topic } from "@/api/topic/index.js";
export default {
  data() {
    return {
      list: [],

      //是否处于加载状态，加载过程中不触发load事件
      //进入页面默认为false
      loading: false,
      //是否已加载完成，加载完成后不再触发load事件
      //进入页面默认为false
      finished: false,

      start: 1,
    };
  },
  methods: {
    onLoad() {
      // 不管发送的请求时get还是set,传入的都是一个对象
      topic({
        page: this.start,
      }).then((res) => {
        console.log(res);
        this.list.push(...res.data);
        this.loading = false;
        this.start++;
        if (this.start > res.total) {
          this.finished = true;
        }
      });
    },
  },
  computed: {},
  components: {},
  created() {
    //请求数据
    // topic().then((res) => {
    //   //   console.log(res);
    //   this.list = res.data;
    //   console.log(this.list);
    // });
  },
  mounted() {},
};
</script>

<style scoped lang="scss">

@mixin over-hidd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}

#app {
  width: 100%;
  padding-bottom: 50px;
}
* {
  margin: 0;
  padding: 0;
}
.topia {
    
  img {
    width: 100%;
    border-top: 10px solid #f4f4f4;
  }
  & li:first-child img{
    border-top: none;
  }
  .topic-p1 {
    font-size: 18px;
    color: #333;
    margin: 15px 0;
  }
  .topic-p2{
      color: #999;
      height: 32px;
      margin: 8px 0 12px 0;
      padding: 0 10px;
      @include over-hidd;
  }
  .topic-p3{
      color: #b4282d;
      margin: 10px 0 13.5px 0;
  }
}
</style>
